<template>
	<view class="container">
		<view class="user_box">

			<view class="title1">
				<view class="title1_2">
					<view
						:style="[versionType? {'border': '2rpx solid #999','color': '#1C991D','box-shadow': 'inset 0rpx 0rpx 10rpx 10rpx #eaeaea'}:{}]"
						@click="versionType = true">雇主</view>
					<view
						:style="[versionType? {}:{'border': '2rpx solid #999','color': '#1C991D','box-shadow': 'inset 0rpx 0rpx 10rpx 10rpx #eaeaea'}]"
						@click="onchange">兼职</view>
				</view>
			</view>
			<view class="flex hcenter wcenter user_Info">
				<up-avatar :src="userInfo.avatar" size="60"></up-avatar>
				<view class="user_name">
					<view class="txt_n" style="margin-bottom: 20rpx;"><text>{{userInfo.nickname}}</text>
						<text>L{{userInfo.vip}}</text>
					</view>
					<view class="txt_n">
						<text>可提现余额</text><text>{{userInfo.money!=''?userInfo.money:'0.00'}}</text>
						<view style="width: 140rpx; " @click="onwithdraw">
							<up-button type="success" size="mini" shape="circle" text="提现"></up-button>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="notice">
			<up-notice-bar :text="Notice" bgColor="#233553" color="#fff"></up-notice-bar>
		</view>
		<view v-if="versionType == false" class="swicth">
			<view>
				<text>服务状态</text>
				<text>（关闭服务后将不接受预约）</text>
			</view>
			<view class="center">
				<up-switch :activeValue="1" :inactiveValue="0" v-model="userInfo.statusService" activeColor="#03c213"
					asyncChange @change="asyncChange"></up-switch>

			</view>
		</view>
		<view v-if="versionType == false" class="shuju">
			<view class="shuju1">
				<text>{{userInfo.doneOrderCount?userInfo.doneOrderCount:0}}</text>
				本月成交量
			</view>
			<view style="width: 2rpx;height: 60%;border-left: 2rpx solid #eaeaea;"></view>
			<view class="shuju1">
				<text>{{userInfo.doneOrderThisMonth?userInfo.doneOrderThisMonth:0}}</text>
				本月成交额
			</view>
			<view style="width: 2rpx;height: 60%;border-left: 2rpx solid #eaeaea;"></view>
			<view class="shuju1">
				<text>{{userInfo.serviceVisitCount?userInfo.serviceVisitCount:0}}</text>
				本月访问量
			</view>
		</view>
		<view v-if="versionType == false" class="navList">
			<up-grid :border="false" col="4">
				<up-grid-item v-for="(item,index) in navList" :key="index" @click="goPage(item)">
					<up-icon :customStyle="{paddingTop:20+'rpx'}" :color="item.color" :name="item.icon"
						size="64rpx"></up-icon>
					<text class="grid-text">{{item.name}}</text>
				</up-grid-item>
			</up-grid>
		</view>
		<view v-if="versionType == true" class="navList">
			<up-grid :border="false" col="4">
				<up-grid-item v-for="(item,index) in navList2" :key="index" @click="goPage(item)">
					<up-icon :customStyle="{paddingTop:20+'rpx'}" :color="item.color" :name="item.icon"
						size="64rpx"></up-icon>
					<text class="grid-text">{{item.name}}</text>
				</up-grid-item>
			</up-grid>
		</view>
		<view v-if="versionType == true" class="fx">
			<view class="fx_title">
				<view>分销中心</view>
				<view>
					<!-- <image src="/static/img/yjtBlack.png" mode="widthFix"></image> -->
				</view>
			</view>
			<view style="width: 90%;height: 2rpx;border-bottom: 2rpx solid #eaeaea;margin: 0 auto;"></view>
			<view class="tuList">
				<view @click="onmyteam">
					<image src="/static/f/07.gif" mode="widthFix"></image>
					<text>{{teamcount}}<text style="font-size: 30rpx;color: #888888;">人</text></text>
					<text style="font-size: 30rpx;color: #888888;">我的团队</text>
				</view>
				<view @click="onmoneylist">
					<image src="/static/f/08.gif" mode="widthFix"></image>
					<text>{{teammoney}}<text style="font-size: 30rpx;color: #888888;">元</text></text>
					<text style="font-size: 30rpx;color: #888888;">待审佣金</text>
				</view>
			</view>
		</view>
		<view class="showList" v-if="versionType == false">
			<view class="orderList" v-for="(item,index) in list" :key="index" @click="ondetail(item)">
				<view class="orderList_title">
					<view>订单号：{{item.orderNo}}</view>
					<view>{{item.createdAt}}</view>
				</view>
				<view class="orderList_content">
					<view class="orderList_content_left">
						<up-image width="120rpx" height="120rpx" :src="JSON.parse(item.serviceSnapshot).icon"
							:lazy-load="true" mode="aspectFill"></up-image>
					</view>
					<view class="orderList_content_right">
						<view class="right_title1">
							<view>{{JSON.parse(item.serviceSnapshot).serviceName}}</view>
							<view>{{JSON.parse(item.serviceSnapshot).serviceTime}}</view>
						</view>
						<view class="content_price">
							<view>￥{{item.money}}</view>
							<view>x{{item.buyCount}}</view>
						</view>
					</view>
				</view>
				<view class="orderList_down">
					<view class="orderList_down_1">
						<view>买家信息</view>
						<up-tag v-if="item.status == 0" text="待付款" plain size="mini" type="error"></up-tag>
						<up-tag v-if="item.status == 1" text="付款成功" plain size="mini" type="success"></up-tag>
						<up-tag v-if="item.status == 2" text="付款失败" plain size="mini" type="warning"></up-tag>
						<up-tag v-if="item.status == 3" text="用户取消" plain size="mini" type="info"></up-tag>
						<up-tag v-if="item.status == 4" text="退款申请中" plain size="mini" type="warning"></up-tag>
						<up-tag v-if="item.status == 5" text="已退款" plain size="mini" type="info"></up-tag>
						<up-tag v-if="item.status == 6" text="已关闭" plain size="mini" type="info"></up-tag>
						<up-tag v-if="item.status == 7" text="服务中" plain size="mini" type="success "></up-tag>
						<up-tag v-if="item.status == 8" type="info" text="订单完成" plain size="mini"></up-tag>
					</view>
					<view class="orderList_down_2">
						<view><up-text mode="name" size="26rpx" type="info"
								:text="JSON.parse(item.addressSnapshot).name" format="encrypt"></up-text>
						</view>
						<view>
							<up-text prefixIcon="phone" size="26rpx" type="info" mode="phone"
								:text="JSON.parse(item.addressSnapshot).mobile" format="encrypt"></up-text>
						</view>
					</view>
					<view class="orderList_down_3">
						<up-text type="info" size="24rpx" :text="`备注：${item.remark}`"></up-text>
					</view>
				</view>
			</view>
			<view style="width: 100%;height: 3vh;"></view>
		</view>
	</view>
</template>

<script>
	import {
		fxteamcount,
		fxteammoney,
	} from '@/api/user.js'
	import {
		getorderListApi,
		orderCheckApi
	} from '@/api/order.js'
	import {
		serverStatusApi
	} from '@/api/service.js'

	import {
		useStore
	} from '@/store/index.js'
	import {
		onLoad,
		onUnload
	} from "@dcloudio/uni-app"
	import {
		reactive,
		toRefs,
		
		ref,
		watch,
		computed,
		onMounted,
	} from "vue"
	export default {

		setup() {
			const store = useStore()
			const state = reactive({
				userInfo: computed(() => store.userInfo),
				versionType: true,
				Notice: '上线内测',
				navList2: [{
						name: '订单管理',
						icon: 'order',
						color: "#3c9cff",
						url: '/pages/order/index',//'/subpages/order/list'
					},
					{
						name: '我的收藏',
						icon: 'bookmark',
						color: "#16c734",
						url: '/subpages/my/collect'
					},
					{
						name: '个人信息',
						icon: 'file-text',
						color: "#3c9cff",
						url: '/subpages/my/info'
					},
					{
						name: '我的钱包',
						color: "#f9ae3d",
						icon: 'red-packet',
						url: '/subpages/wallet/index'
					},
					{
						name: '收货地址',
						color: "#16c734",
						icon: 'map',
						url: '/pages/my/address/index'
					}
				],
				navList: [{
						name: '扫码收款',
						icon: 'scan',
						color: "#16c734",
						url: null
					},
					{
						name: '订单管理',
						icon: 'order',
						color: "#3c9cff",
						url: '/pages/my/serviceOrder/index'

					},
					{
						name: '服务管理',
						icon: 'grid',
						color: "#3c9cff",
						url: '/pages/my/serviceList/index'
					},
					{
						name: '个人信息',
						icon: 'file-text',
						color: "#3c9cff",
						url: '/pages/my/serviceInfo/index'
					},
					{
						name: '我的钱包',
						color: "#f9ae3d",
						icon: 'red-packet',
						url: '/subpages/wallet/index'
					},
					{
						name: '收货地址',
						color: "#16c734",
						icon: 'map',
						url: '/pages/my/address/index'
					},
					{
						name: '个人简历',
						color: "#16c734",
						icon: 'file-text',
						url: '/pages/my/serviceInfo/resume'
					}
				],
				list: [{}],
				teamcount: "0",
				teammoney: "0.00",
			})
			onLoad((option) => {
				getData()
				store.getUserInfo().then(res => {
					console.log(state.userInfo);

				});
			})
			// 服务开关
			const asyncChange = (e) => {
				console.log(e)
				uni.showModal({
					content: e ? '确定要开启服务？' : '关闭服务后将不接受预约,确定要关闭服务吗？',
					success: async (res) => {
						if (res.confirm) {
							await serverStatusApi()
							store.getUserInfo()
						}
					},
				});
			}
			const getData = async () => {
				// const {
				// 	data
				// } = await getorderListApi({
				// 	pageSize: 10,
				// 	page: 1,
				// })
				// state.list = data.records;
				getorderListApi({
					pageSize: 10,
					page: 1,
				}).then(res => {
					console.log(res);
					state.list = res.data.records;
				});

				fxteamcount().then(res => {
					state.teamcount = res.data;
				});
				fxteammoney().then(res => {
					state.teammoney = res.data;
				});
			}
			
			const goPage = (item) => {
				if(!item.url){
					scanCode()
					return false
				}
				if(item.url=='/pages/order/index')
				{
					uni.switchTab({
						url:item.url
					})
					return;
				}
				uni.navigateTo({
					url: item.url
				})
			}
			const onwithdraw = () => {
				uni.navigateTo({
					url: "/subpages/wallet/withdraw"
				})
			}
			const ondetail = (item) => {
				// if(item.status==0 || item.status==6)
					uni.navigateTo({
						url: '/pages/my/serviceOrder/orderDetail?orderNo=' + item.orderNo
					})
				// else
				// 	uni.navigateTo({
				// 		url: '/subpages/order/detail?orderNo=' + item.orderNo
				// 	})
			}
			const onchange = () => {
				//其中status是状态：0=待审核，1=审核通过，2=审核驳回
				if (state.userInfo.serverInfo == null) {
					uni.navigateTo({
						url: "/pages/my/serviceInfo/index?type=1"
					})
					return;
				}
				if (state.userInfo.serverInfo.status == 2) {
					uni.navigateTo({
						url: "/pages/my/serviceInfo/index?type=2"
					})
					return;
				}
				if (state.userInfo.serverInfo.status == 0) {
					uni.navigateTo({
						url: "/pages/my/serviceInfo/index?type=3" //
					})
					return;
				}

				state.versionType = false;

			}
			const scanCode = () => {
				uni.scanCode({
					success: async(res) => {					
						
						uni.navigateTo({
							url: '/pages/my/serviceOrder/payDetail?QRcode=' + res.result
						})					
			// 			try {
			// 				await orderCheckApi(
			// 					 res.result
			// 				)						
			// 				uni.showToast({
			// 					title: '收款成功',
			// 					icon: 'success',
			// 					duration: 1000
			// 				});							
			// 				uni.hideLoading()
						
			// 			} catch {
			
			// 				uni.hideLoading()
			// 			}
						
					},
					fail: (err) => {
						console.error('扫码失败：');
						console.error( err.errMsg);
					}
				});
			}
			function onmyteam(){
				uni.navigateTo({
					url:"/subpages/team/myteam"
				})
			}
			function onmoneylist(){
				uni.navigateTo({
					url:"/subpages/team/distributionorder"
				})
			}
			return {
				...toRefs(state),
				goPage,
				scanCode,
				asyncChange,
				onchange,
				onwithdraw,
				ondetail,
				onmyteam,
				onmoneylist
			}
		}

	}
</script>
<style>
	page {
		background-color: #EFEFEF;
	}
</style>
<style lang="scss" scoped>
	.container {
		width: 100vw;
		height: 100vh;
	}

	.center {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.user_box {
		width: 100%;
		height: 360rpx;
		background-color: #17253D;
		position: relative;

		.user_Info {
			width: 100%;
			padding: 50rpx 0;

			.user_name {
				color: #fff;
				margin-left: 20rpx;

				text {
					padding: 0 8rpx;
				}

				.txt_n {
					display: flex;
					align-items: center;
					font-size: 32rpx;
				}
			}
		}
	}

	.title1 {
		// width: 100%;
		height: 20%;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		padding: 10rpx 10rpx 0 0;

		.title1_1 {
			width: 50%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: flex-start;

			image {
				width: 8%;
				height: 10%;
				margin: 0 1% 0 2%;
			}

			text {
				font-size: 30rpx;
				color: white;
			}
		}

		.title1_2 {
			width: 30%;
			height: 80%;
			background-color: white;
			border-radius: 50rpx;
			display: flex;
			align-items: center;
			justify-content: space-evenly;
			font-size: 28rpx;

			view {
				width: 45%;
				height: 85%;
				border-radius: 50rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}

	.title2 {
		width: 100%;
		padding-top: 90rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		.title2_left {
			width: 30%;
			height: 100%;

			image {
				width: 50%;
				height: 100%;
			}
		}

		.title2_right {
			width: 70%;
			height: 100%;
			display: flex;
			align-items: flex-start;
			justify-content: center;
			flex-direction: column;
			color: white;

			.title2_right_name {
				margin: 2% 0;
			}
		}
	}

	.notice {
		width: 100%;
	}

	.swicth {
		// width: 100%;
		// height: 5%;
		background-color: white;
		display: flex;
		align-items: center;
		justify-content: space-between;

		view:nth-child(1) {
			width: 80%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: flex-start;
			font-size: 35rpx;

			text:nth-child(1) {
				margin: 0 0 0 5%;
			}

			text:nth-child(2) {
				font-size: 30rpx;
				color: #ACACAC;
			}
		}

		view:nth-child(2) {
			width: 20%;
			height: 100%;
			position: relative;

			text {
				position: absolute;
				top: 27%;
				left: 23%;
				font-size: 28rpx;
				color: white;
			}
		}
	}

	.shuju {
		width: 100%;
		height: 12%;
		background-color: white;
		margin: 5% 0;
		display: flex;
		align-items: center;
		justify-content: space-evenly;

		.shuju1 {
			width: 30%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			color: #A4A4A4;

			text {
				color: black;
				font-size: 40rpx;
				font-weight: 500;
				margin: 5% 0;
			}
		}
	}

	.navList {
		width: 100%;
		padding: 20rpx 0;
		background-color: white;

		.grid-text {
			line-height: 50rpx;
			font-size: 30rpx;
		}
	}

	.fx {
		width: 100%;
		// height: 20%;
		margin: 20rpx 0;
		background-color: white;

		.fx_title {
			width: 100%;
			height: 30%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 16rpx 0;

			view:nth-child(1) {
				font-size: 35rpx;
				margin-left: 5%;
			}

			view:nth-child(2) {
				width: 30%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: flex-end;
				margin-right: 5%;

				image {
					width: 15%;
					height: 100%;
				}
			}
		}

		.tuList {
			padding: 60rpx 0;
			width: 100%;
			height: 70%;
			display: flex;
			align-items: center;
			justify-content: center;

			view {
				width: 50%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;

				image {
					width: 15%;
					height: 100%;
				}

				text {
					font-size: 50rpx;
				}
			}
		}
	}

	.orderList {
		width: 100%;
		background-color: white;
		margin-top: 20rpx;

		.orderList_title {
			width: 100%;
			height: 5vh;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 28rpx;

			view:nth-child(1) {
				margin-left: 3%;
			}

			view:nth-child(2) {
				margin-right: 3%;
				color: #999;
				font-size: 26rpx;
			}
		}

		.orderList_content {


			display: flex;
			align-items: center;
			justify-content: center;
			padding: 10rpx 20rpx 20rpx 20rpx;
			border-bottom: 1rpx solid #eaeaea;

			.orderList_content_left {
				width: 140rpx;
				height: 100%;
				display: flex;
				align-items: center;

			}

			.orderList_content_right {
				flex: 1;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;

				.right_title1 {
					flex: 1;
					height: 100%;

					view:nth-child(2) {
						color: #999;
						font-size: 28rpx;
					}
				}

				.content_price {
					width: 180rpx;
					height: 100%;
					align-items: center;
					justify-content: center;

					view {
						text-align: right;
					}

					view:nth-child(2) {
						color: #767676;
					}
				}
			}
		}

		.orderList_down {
			width: 100%;

			.orderList_down_1 {
				padding: 20rpx;
				display: flex;
				justify-content: space-between;
			}

			.orderList_down_2 {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: flex-start;
				padding-bottom: 20rpx;

				view {
					margin-left: 20rpx;
				}
			}

			.orderList_down_3 {
				width: 100%;
				height: 3vh;
				font-size: 28rpx;
				margin-left: 3%;
				color: #767676;
				display: flex;
				align-items: center;
				justify-content: flex-start;

				text {
					color: #CBCBCB;
				}
			}
		}
	}
</style>